<template>
  <div class="knowledgeListBg">
    <div class="listBg" v-for="(r,i) in listData" :key="i">
      <div class="label">{{'路径'+(i+1)}}</div>
      <div class="content">
        <div class="item" v-for="(r2,i2) in r" :key="i+'_'+i2">
          <div class="lAr"></div><div class="rAr"></div>
          <img class="icon" :src="r2.icon" />
          <div class="text">{{r2.label}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'knowledge-list',
  props: {
    data: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    listData(){
      var newData = this.data.map((item)=>{
        item = item.map((item2)=>{
          var obj = {
            data: item2,
            label: item2.name,
            icon: ''
          };
          for(var i=0;i<this.nodeIcons.length;i++){
            if(this.nodeIcons[i].name==item2.label){
              obj.icon = this.nodeIcons[i].icon;
              break;
            }
          }
          return obj;
        })
        return item;
      })
      return newData;
    },
    ...mapGetters([
      'nodeIcons',
    ])
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
  .knowledgeListBg {
    box-sizing: border-box;
    & *{
      box-sizing: border-box;
    }
    padding-top: 30px;
    padding-left: 30px;
    width: 100%;
    float: left;
    .listBg {
      width: 100%;
      min-height: 32px;
      margin-bottom: 12px;
      float:left;
      display: flex;
      .label {
        width: 65px;
        height: 32px;
        line-height: 32px;
        font-size: $font-size14;
        color: $color-222;
        float:left;
      }
      .content {
        min-height: 32px;
        flex:1;
        .item {
          min-width: 120px;
          height: 32px;
          border: 1px $color-gray2 solid;
          border-radius: 4px;
          margin-right: 12px;
          margin-bottom: 12px;
          background-color: $color-white0;
          float:left;
          position:relative;
          .icon {
            margin: 3px 10px 3px 16px;
            width: 24px;
            height:24px;
            float:left;
          }
          .text {
            margin-top: 3px;
            margin-right: 10px;
            height:24px;
            line-height: 24px;
            font-size: $font-size14;
            color: $color-222;
            white-space: nowrap;
            float:left;
          }
          .lAr {
            position: absolute;
            top: 4px;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 11px 8px;
            border-color: transparent;
            border-left-color: $color-gray2;
            &::after{
              content: '';
              position: absolute;
              top: -11px;
              left: -9px;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 11px 8px;
              border-color: transparent;
              border-left-color: $background-default;
            }
          }
          .rAr {
            position: absolute;
            top: 0;
            right: -20px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 15px 10px;
            border-color: transparent;
            border-left-color: $color-gray2;
            &::after{
              content: '';
              position: absolute;
              top: -15px;
              right: -9px;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 15px 10px;
              border-color: transparent;
              border-left-color: $color-white0;
            }
          }
          &:last-child{
            margin-right: 0;
            .text {
              margin-right: 16px;
            }
            .rAr {
              display: none;
            }
          }
          &:first-child{
            .icon {
              margin-left: 10px;
            }
            .lAr {
              display: none;
            }
          }
        }
      }
    }
  }
</style>